<!-- 一户一档 -->
<template>
  <div id="householdFile">
    <div class="householdFile-nfcc">
      <div class="sort">
        <ul>
          <li v-for="(item, index) in sortList" :key="index" is-link @click="_sortlichange(item, index)">
            <span>{{ item.title }}</span>
            <img v-if="item.sort === 'asc'" src="./../../../../static/imgs/ZLJ/sort1.png" />
            <img v-else src="./../../../../static/imgs/ZLJ/sort2.png" />
          </li>
        </ul>
        <van-popup v-model:show="showPicker" round position="bottom">
          <!--  @close="CloseBtn" -->
          <van-cascader v-if="showPicker" v-model="cityCode" title="选择所属区域" :options="CountyData" :closeable="false" @change="onConfirm"
          @finish="onFinish" style="position: relative;">
            
          </van-cascader>
          <span style="position: absolute; top: 0%; right: 10px;font-size: 16px;" @click="CloseBtn">确定</span>
        </van-popup>
      </div>
      <div v-if="showPicker1" style="background: #fff;height: 430px;">
        <van-field v-model="form.SZQY" label="所在区域" placeholder="所在区域" @click="showPickerBottom = true" />
        <van-popup v-model="showPickerBottom" position="bottom">
          <van-picker value-key="enumname" title="选择所在区域" show-toolbar :columns="Enum.SZQY" @confirm="onConfirmBottom"
            @cancel="showPickerBottom = false" />
        </van-popup>
        <van-field v-model="form.TDXZ" label="土地性质" placeholder="土地性质" @click="showPickerBottom1 = true" />
        <van-popup v-model="showPickerBottom1" position="bottom">
          <van-picker value-key="enumname" title="选择土地性质" show-toolbar :columns="Enum.TDXZ" @confirm="onConfirmBottom1"
            @cancel="showPickerBottom1 = false" />
        </van-popup>
        <van-field v-model="form.TDXZXFLX" label="土地性质细分类型" placeholder="土地性质细分类型" @click="showPickerBottom2 = true" />
        <van-popup v-model="showPickerBottom2" position="bottom">
          <van-picker value-key="enumname" title="选择土地性质细分类型" show-toolbar :columns="Enum.tdxzxflx"
            @confirm="onConfirmBottom2" @cancel="showPickerBottom2 = false" />
        </van-popup>
        <van-field v-model="form.CS" label="建筑层数" placeholder="建筑层数" @click="showPickerBottom3 = true" />
        <van-popup v-model="showPickerBottom3" position="bottom">
          <van-picker value-key="enumname" title="选择建筑层数" show-toolbar :columns="Enum.CS" @confirm="onConfirmBottom3"
            @cancel="showPickerBottom3 = false" />
        </van-popup>
        <van-field v-model="form.JGLX" label="结构类型" placeholder="结构类型" @click="showPickerBottom4 = true" />
        <van-popup v-model="showPickerBottom4" position="bottom">
          <van-picker value-key="enumname" title="选择结构类型" show-toolbar :columns="Enum.JGLX" @confirm="onConfirmBottom4"
            @cancel="showPickerBottom4 = false" />
        </van-popup>
        <van-field v-model="form.FWYT" label="房屋用途" placeholder="房屋用途" @click="showPickerBottom5 = true" />
        <van-popup v-model="showPickerBottom5" position="bottom">
          <van-picker value-key="enumname" title="选择房屋用途" show-toolbar :columns="Enum.FWYT" @confirm="onConfirmBottom5"
            @cancel="showPickerBottom5 = false" />
        </van-popup>
        <van-field v-model="form.IS" label="是否同时自住" placeholder="是否同时自住" @click="showPickerBottom6 = true" />
        <van-popup v-model="showPickerBottom6" position="bottom">
          <van-picker value-key="enumname" title="选择是否同时自住" show-toolbar :columns="Enum.IS" @confirm="onConfirmBottom6"
            @cancel="showPickerBottom6 = false" />
        </van-popup>
        <van-field v-model="form.yhfwbh" label="自建房排查编号" placeholder="自建房排查编号" />
        <van-field v-model="form.address" label="详细地址" placeholder="详细地址" />
        <van-button type="info" size="mini" style="float: right;margin-top: 5px;margin-right: 5px;"
          @click="clearserach">重置</van-button>
        <van-button type="info" size="mini" style="float: right;margin-top: 5px;margin-right: 5px;"
          @click="serachData">查询</van-button>
        <!-- <van-field v-model="form.YHLX" label="隐患类型" placeholder="隐患类型" @click="showPickerBottom7=true"/>
            <van-popup v-model="showPickerBottom7" position="bottom">
                <van-picker value-key="enumname" title="选择隐患类型" show-toolbar :columns="Enum.YHLX" @confirm="onConfirmBottom7" @cancel="showPickerBottom7 = false" />
            </van-popup> -->
      </div>
      <div style="margin-top: 10px">
        <van-search v-model="form.propertyPerson" style="border-radius: 10px; height: 44px" background="#f7f8fa"
          placeholder="产权人（使用人）姓名" @search="serachData" />
      </div>
      <div :class="showPicker1 ? 'householdFile-conent' : 'householdFile-middle1'" ref="householdFileMiddle1">
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
        <van-list v-model="loading" :offset="4" :finished="finished" @load="onLoad" finished-text="没有更多了"
          class="householdFile-middle1">
          <van-cell v-for="(item, index) in ListDataOption" :key="index" @click="handleAdd(item)">
            <ul class="householdFile-middle">
              <li class="householdFile-middle2">
                产权人：{{ item.cqr }}
                <span style="float: right" @click.stop="showGeo(item)">
                  <img src="./../../../../static/imgs/map/marker.png" alt="" width="30px">
                </span>
              </li>
              <li class="householdFile-middle4">自建房排查编号：{{ item.yhfwbh }}</li>
              <li class="householdFile-middle4">房屋用途：{{ item.fwyt }}</li>
              <li class="householdFile-middle3">所属地区：{{ item.belongCity }}{{ item.belongCountry }}{{ item.belongTown }}{{
                item.belongVillage }}</li>

            </ul>
          </van-cell>
        </van-list>
        <!-- </van-pull-refresh> -->
      </div>
      <!-- <div v-else style="height: 79.5vh; text-align: center; padding-top: 20vh">
            <div style="margin-bottom: 10px">
                <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
            </div>
            <div>暂无数据</div>
        </div> -->
    </div>
  </div>
</template>
<script>
import dd from 'gdt-jsapi'
import axios from 'axios'
import BScroll from 'better-scroll'
import {
  tFwZjfNewlist,
  GetAdministrative,
  getDataEnumByGroupName
} from '../../../utils/api'
export default {
  data() {
    return {
      SSQYItem: {
        ssqy: '',
        cityCode: ''
      },
      Enum: {
        TDXZ: [
          {
            enumname: '',
            enumvalue: '',
          }
        ],
        SZQY: [
          {
            enumname: '',
            enumvalue: '',
          }
        ],
        ZZCS: [{
          enumname: '',
          enumvalue: '',
        }],
        JGLX: [{
          enumname: '',
          enumvalue: '',
        }],
        FWYT: [{
          enumname: '',
          enumvalue: '',
        }],
        CS: [
          {
            enumname: '',
            enumvalue: '',
          }
        ],
        tdxzxflx: [],
        IS: [{
          enumname: '',
          enumvalue: ''
        }, {
          enumname: '是',
          enumvalue: 1
        }, {
          enumname: '否',
          enumvalue: 0
        }],
        YHLX: [
          {
            enumname: '',
            enumvalue: ''
          }, {
            enumname: '无隐患',
            enumvalue: 0
          }, {
            enumname: '未整治',
            enumvalue: 1
          }, {
            enumname: '整治中',
            enumvalue: 2
          }, {
            enumname: '仅采取工程措施',
            enumvalue: 3
          }, {
            enumname: '仅采取管理措施',
            enumvalue: 4
          }, {
            enumname: '既采取工程措施又采取管理措施',
            enumvalue: 5
          }]
      },
      // showPickerBottom7: false,
      showPickerBottom6: false,
      showPickerBottom5: false,
      showPickerBottom4: false,
      showPickerBottom3: false,
      showPickerBottom2: false,
      showPickerBottom1: false,
      showPickerBottom: false,
      startPage: 0,
      loading: false,
      finished: false,
      refreshing: false,
      showPicker: false,
      showPicker1: false,
      dataSource: '',
      sourData: [
        {
          name: '网格巡查',
          val: 0
        },
        {
          name: '巡查新增',
          val: 1
        },
        {
          name: '农户提交',
          val: 2
        }
      ],
      CountyData: [],
      sortList: [
        {
          title: '所属区域',
          name: 'RWZT',
          sort: 'asc'
        },
        {
          title: '更多',
          name: 'RWZT',
          sort: 'asc'
        }
      ],
      BaseURL: window.g.BaseURL + '/api/farmerHouse',
      active: '0',
      form: {
        propertyPerson: '',
        szqy: '',
        SZQY: '',
        TDXZ: '',
        tdxz: '',
        tdxzxflx: '',
        TDXZXFLX: '',
        jglx: '',
        JGLX: '',
        FWYT: '',
        fwyt: '',
        IS: '',
        subFwyt: '',
        yhfwbh: '',
        address: ''
        //   YHLX: '',
        //   yhTypes: ''
      },
      ISShow: true,
      cityCode: window.localStorage.getItem('citycode').replace(/(0+)$/g, ''),
      ListDataOption: [],
      areaCode: ''
    }
  },
  components: {
  },
  methods: {
    //获取枚举
    getDataEnumByGroupName: async function () {
      let _this = this
      this.Enum.SZQY = [{
        enumname: '',
        enumvalue: '',
      }]
      this.Enum.TDXZ = [{
        enumname: '',
        enumvalue: '',
      }]
      this.Enum.CS = [{
        enumname: '',
        enumvalue: '',
      }]
      this.Enum.JGLX = [{
        enumname: '',
        enumvalue: '',
      }]
      this.Enum.FWYT = [{
        enumname: '',
        enumvalue: '',
      }]
      this.Enum.ZZCS = [{
        enumname: '',
        enumvalue: '',
      }]
      let parm = {
        groupNames: ["SZQY","TDXZ", "CS", "JGLX", "FWYT", "ZZCS"],
      };
      let webResult = await getDataEnumByGroupName(parm)
      if (webResult.data && webResult.data.data) {
        webResult.data.data.forEach(async (item) => {
          // this.Enum[item.groupName] = item.gsaDataEnumList;
          _this.Enum[item.groupName] = _this.Enum[item.groupName].concat(item.gsaDataEnumList)
        });
      }
      console.log( this.Enum.TDXZ )
    },
    onConfirmBottom(val) {
      this.form.SZQY = val.enumname
      this.form.szqy = val.enumvalue
      this.showPickerBottom = false
    },
    onConfirmBottom6(val) {
      this.form.IS = val.enumname
      this.form.subFwyt = val.enumvalue
      this.showPickerBottom6 = false
    },
    onConfirmBottom5(val) {
      this.form.FWYT = val.enumname
      this.form.fwyt = val.enumvalue
      this.showPickerBottom5 = false
    },
    onConfirmBottom4(val) {
      this.form.JGLX = val.enumname
      this.form.jglx = val.enumvalue
      this.showPickerBottom4 = false
    },
    onConfirmBottom3(val) {
      this.form.CS = val.enumname
      this.form.cs = val.enumvalue
      this.showPickerBottom3 = false
    },
    onConfirmBottom2(val) {
      this.form.TDXZXFLX = val.enumname
      this.form.tdxzxflx = val.enumvalue
      this.showPickerBottom2 = false
    },
    onConfirmBottom1: async function (val) {
      this.Enum.tdxzxflx = [{
        enumname: '',
        enumvalue: '',
      }]
      this.form.TDXZ = val.enumname
      this.form.tdxz = val.enumvalue
      this.showPickerBottom1 = false
      // this.serachData()
      let groupNames = []
      if (val.enumvalue != '') {
        if (val.enumvalue == 1) {
          groupNames = ["GYTDXZXFLX"]
        } else if (val.enumvalue == 2) {
          groupNames = ["JTTDXZXFLX"]
        }
        let parm = {
          // groupNames: val.enumvalue == 1 ? ["GYTDXZXFLX"] : ["JTTDXZXFLX"],
          groupNames: groupNames
        };
        let webResult = await getDataEnumByGroupName(parm)
        if (webResult.data && webResult.data.data) {
          webResult.data.data.forEach(async (item) => {
            // this.Enum.tdxzxflx = item.gsaDataEnumList;
            this.Enum.tdxzxflx = this.Enum.tdxzxflx.concat(item.gsaDataEnumList);
          });
        }
      }
    },
    onFinish({ value, selectedOptions, tabIndex }) {
      console.log(value, selectedOptions, tabIndex, 'value, selectedOptions, tabIndex')
      let cityLength = window.localStorage.getItem('citycode').toString().replace(/(0+)$/g, '').length
      this.sortList[0].title = selectedOptions.map((option) => option.text).join('/')
      this.cityCode = value
      this.SSQYItem = {
        ssqy: selectedOptions.map((option) => option.text).join('/'),
        cityCode: value
      }
      // this.areaCode = selectedOptions.map((option) => option.value)
      // if(cityLength==2&&this.areaCode.length == 4){
      //   this.showPicker = false
      // }
      // if(cityLength==4&&this.areaCode.length == 3){
      //   this.showPicker = false
      // }
      // this.startPage = 1
      // this.ListDataOption = []
      // this.getData()
    },
    CloseBtn(){
      this.showPicker = false
      this.startPage = 1
      this.ListDataOption = []
      this.getData()
    },
    
    //定位
    showGeo(row) {
      if (row.geomP != '') {
        let dataValue = [{ "geomP": row.geomP }]
        let url = `https://nfzjszlb.jst.zj.gov.cn/dt/#/PlottingMapView?user=${row.cityCode}&data=${encodeURIComponent(JSON.stringify(dataValue))}`
        window.open(url)
      } else {
        this.$message.error("坐标不能为空!")
      }
    },
    onRefresh() {
      this.$store.state.householdFileForm = {}
      this.$store.state.SSQYItem = {}
      this.clearserach()
      this.showPicker1 = false
      this.startPage = 0
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.ListDataOption = []
      this.onLoad()
    },
    onLoad() {
      if (this.refreshing) {
        this.ListDataOption = [];
        this.refreshing = false;
      }
      this.startPage += 1
      this.getData()
    },
    getCountyData: async function () {
      this.CountyData = []
      let webResult = await axios.get(window.g.BaseURL + 'api/rescatalog/gsaCodeCity/listForTree/' + window.localStorage.getItem('citycode'))
      // this.CountyData = webResult.data.data
      webResult.data.data.forEach((item) => {
        this.CountyData.push({
          text: item.cityname,
          value: item.citycode,
          children: []
        })
      })
    },
    onConfirm({ value, selectedOptions, tabIndex }) {
      if (selectedOptions[tabIndex].children.length == 0 && tabIndex < 3) {
        this.getXZQH(value, selectedOptions, tabIndex)
      }
      this.onFinish({ value, selectedOptions, tabIndex })
    },
    getXZQH: async function (value, selectedOptions, tabIndex) {
      let cityLength = window.localStorage.getItem('citycode').toString().replace(/(0+)$/g, '').length
      const res = await GetAdministrative(value)
      selectedOptions[tabIndex].children = []
      if (res.data.data.length > 0) {
        res.data.data.forEach((element) => {
          let obj = {
            text: element.cityname,
            value: element.citycode
          }
          if (cityLength==2&&tabIndex < 2) {
            obj['children'] = []
          }
          if (cityLength==4&&tabIndex < 1) {
            obj['children'] = []
          }
          selectedOptions[tabIndex].children.push(obj)
        })
      }
    },
    //字段排序
    _sortlichange(item, index) {
      const self = this
      if (item.sort == 'asc') {
        item.sort = 'desc'
      } else {
        item.sort = 'asc'
      }
      if (index == 0) {
        this.showPicker = true
        this.showPicker1 = false
      } else {
        this.showPicker1 = !this.showPicker1
        this.showPicker = false
        this.getDataEnumByGroupName()
      }
    },
    handleAdd(data) {
      for (var k in this.form) {
        if(this.form[k] != ''){
          this.$store.state.householdFileForm = this.form
        }
      }
      for (var k in this.SSQYItem) {
        if(this.SSQYItem[k] != ''){
          this.$store.state.SSQYItem = this.SSQYItem
        }
      }
      this.$router.push({
        path: '/householdFileDetail',
        query: {
          data: JSON.stringify(data)
        }
      })
    },
    getCitycodes(data) {
      var nowUserCode = data.toString();
      if (data && typeof (data) === 'string' && data.split(",").length > 0) {
        var cityList = [];
        var newCitycodeList = data.split(",");
        newCitycodeList.forEach(city => {
          if (city.substring(0, 12) === "330000000000")
            cityList.push(city.substring(0, 2));
          else if (city.substring(4, 12) === "00000000")
            cityList.push(city.substring(0, 4));
          else if (city.substring(6, 12) === "000000")
            cityList.push(city.substring(0, 6));
          else if (city.substring(9, 12) === "000")
            cityList.push(city.substring(0, 9));
          else cityList.push(city);
        }),
          (nowUserCode = cityList.toString());
      } else {
        if (Eca.IsEmpty(nowUserCode)) {
          nowUserCode = "";
        }
        if (nowUserCode) {
          if (nowUserCode.substring(0, 12) === "330000000000")
            nowUserCode = nowUserCode.substring(0, 2);
          else if (nowUserCode.substring(4, 12) === "00000000")
            nowUserCode = nowUserCode.substring(0, 4);
          else if (nowUserCode.substring(6, 12) === "000000")
            nowUserCode = nowUserCode.substring(0, 6);
          else if (nowUserCode.substring(9, 12) === "000")
            nowUserCode = nowUserCode.substring(0, 9);
          else nowUserCode = nowUserCode;
        }
      }
      return nowUserCode;
    },
    serachData(val) {
      console.log(this.form.address, this.cityCode.toString().replace(/(0+)$/g, '').length, 'this.cityCode')
      // if (this.form.address && (this.cityCode=='' || this.getCitycodes(this.cityCode.at(-1)).length < 6)) {
      if (this.form.address && (this.cityCode == '' || this.cityCode.toString().replace(/(0+)$/g, '').length < 6)) {
        this.$message.error("查询详细地址需要指定具体的区县及下级行政区划!");
        return false;
      }
      this.startPage = 0
      this.ListDataOption = []
      this.onLoad()
    },
    clearserach() {
      this.$store.state.householdFileForm = {}
      this.$store.state.SSQYItem = {}
      this.form = {
        propertyPerson: '',
        szqy: '',
        SZQY: '',
        TDXZ: '',
        tdxz: '',
        tdxzxflx: '',
        TDXZXFLX: '',
        jglx: '',
        JGLX: '',
        FWYT: '',
        fwyt: '',
        IS: '',
        subFwyt: '',
        yhfwbh: '',
        address: ''
      },
      this.sortList[0].title = '所属区域'
      this.cityCode = ''
      this.startPage = 0
      this.ListDataOption = []
      this.onLoad()
    },
    async getData() {
      let _this = this
      let parm = {
        pageNum: this.startPage,
        pageSize: 10,
        cityCode: this.cityCode ? this.cityCode.toString().replace(/(0+)$/g, '') : window.localStorage.getItem('citycode').replace(/(0+)$/g, ''),
        cqr: this.form.propertyPerson,
        szqy: this.form.szqy,
        tdxz: this.form.tdxz,
        tdxzxflx: this.form.tdxzxflx,
        csBetween: this.form.cs,
        jglx: this.form.jglx,
        fwyt: this.form.fwyt,
        subFwyt: this.form.subFwyt,
        yhfwbh: this.form.yhfwbh,
        address: this.form.address,
      }
      let webResult = await tFwZjfNewlist(parm)
      this.loading = false
      this.refreshing = false;
      let pageList = webResult.data.data.pageList
      if (webResult.data.data && webResult.data.data.pageList && webResult.data.data.pageList.length > 0) {
        this.finished = false
        this.ListDataOption.push(...webResult.data.data.pageList)
        if (this.ListDataOption.length >= webResult.data.data.totalCount) {
          this.finished = true
          // return
        }
      } else {
        this.finished = true
      }
      // if (pageList.length > 0) {
      //   this.finished = false
      //   this.ListDataOption.push(...pageList)
      // } else {
      //   this.finished = true
      // }
      // if (this.ListDataOption.length >= webResult.data.data.totalCount) {
      //   this.finished = true
      //   // return
      // }
    }
  },
  created() {
    if(JSON.stringify(this.$store.state.SSQYItem) != '{}'){
      this.sortList[0].title = this.$store.state.SSQYItem.ssqy
      this.cityCode = this.$store.state.SSQYItem.cityCode
    }
    if(JSON.stringify(this.$store.state.householdFileForm) != '{}'){
      this.form = this.$store.state.householdFileForm
      this.showPicker1 = true
    }else{
      this.showPicker1 = false
    }
    this.startPage = 0
    this.ListDataOption = []
  },
  mounted() {
    this.getCountyData()
    this.getDataEnumByGroupName()
    dd.ready(function () {
      dd.setTitle({
        title: '安全核查'
      })
        .then((res) => { })
        .catch((err) => {
          console.error(err)
        })
    }) 
    // this.$nextTick(() => {
    //   this.scroll = new BScroll(this.$refs.householdFileMiddle1, {
    //     click:true
    //   })
    // })
  }
}
</script>
<style lang="scss" scoped>
#householdFile {
  height: 100vh;
  // overflow: auto;
  background: #eee;
  width: 100vw;
  font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
  font-size: 18px;
  padding: 6px 10px;

  .sort {
    height: 5vh;
    line-height: 5vh;

    ul {
      display: flex;

      li {
        // width: 33.33333333333%;
        width: 100%;
        text-align: center;
        font-size: 1.6vh;
        font-weight: 400;
        color: #6c6c6c;
        cursor: pointer;

        img {
          height: 1.5vh;
        }
      }
      li:nth-child(1){
        width: 60%;
      }
      li:nth-child(2){
        width: 40%;
      }
    }
  }

  .title {
    width: 100%;
    height: 46px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
  }

  .householdFile-footer {
    width: 99%;
    margin-top: 4px;
    margin: 0 auto;
    padding-top: 12px;
  }

  .householdFile-middle1 {
    height: 86.5vh;
    overflow-y: auto;
  }

  .householdFile-conent {
    height: 36vh;
    overflow-y: auto;
  }

  .householdFile-middle1,
  .householdFile-conent {
    .householdFile-middle {
      background-color: #fff;
      border-radius: 10px;
      padding: 8px 10px;
      width: 98%;
      margin: 0 auto;
      margin-top: 14px;

      .householdFile-middle2 {
        font-size: 18px;
        font-weight: 1000;
        color: black;
        line-height: 36px;
      }

      .householdFile-middle3 {
        font-size: 12px;
        color: #aaa;
        line-height: 24px;

        span {
          float: right;
          // padding-left: 4vw;
        }
      }

      .householdFile-middle4 {
        font-size: 12px;
        color: #aaa;
        line-height: 24px;

        span {
          float: right;
          // padding-left: 4vw;
        }
      }
    }
  }
}</style>
<style lang="scss">
#householdFile {
  .van-field__label {
    width: auto;
  }
  .householdFile-conent, .householdFile-middle1{
    touch-action: auto !important;
  }
}

#householdFile .van-tab {
  font-size: 18px;
}</style>
